<template>
	<!-- 访客端 -->
	<view class="head-info">
		<view class="info-left" @click="handleOpen">
			<view class="pen-box">
				<view class="pen-img">
					<image src="@/static/icon/icon-2.png" mode=""></image>
				</view>
				<view class="pen-text">拜访登记</view>
			</view>
			<view class="tips">
				<view class="" style="white-space: nowrap;">
					请如实填写预约信息，以
				</view>
				<view class="">便顺利拜访。</view>
			</view>
		</view>
		<view class="info-right">
			<view class="appointment" @click="hanldeToRecord(1)">
				<view class="app-img">
					<image src="@/static/icon/icon-3.png" mode=""></image>
				</view>
				<view class="Msg-box app-textBox">
					<view class="app-title">我的预约</view>
					<view class="app-text">查看记录</view>
					<view class="numberMsg">
						{{totalNum}}
					</view>
				</view>
			</view>
			<view class="appointment" @click="handleToCode">
				<view class="app-img">
					<image src="@/static/icon/icon-4.png" mode=""></image>
				</view>
				<view class="app-textBox">
					<view class="app-title">访问凭证</view>
					<view class="app-text">我的验证码</view>
				</view>
			</view>
		</view>
		<!-- 访客拜访登记弹窗 -->
		<uv-popup ref="visitPopup" class="custom-popup " style="z-index: 99;" :closeable="true" round="10px"
			@change="handleClose">
			<view class="visit-popup">
				<view class="form-item">
					<view class="form-title">邀请码</view>
					<view class="">
						<uv-input placeholder="请输入邀请码" border="bottom" class="force-style-input" color="#333"
							fontSize="16px" :customStyle="inputCustomStyle"
							placeholderStyle="font-weight: normal;color:#BBBBBB" v-model="fromList.invitationCode"
							@blur="handleJobNumber"></uv-input>
					</view>
				</view>
				<view class="form-item">
					<view class="form-title">被访人姓名</view>
					<view class="">
						<uv-input placeholder="被访人" border="bottom" class="force-style-input" color="#333"
							fontSize="16px" :customStyle="inputStyleDis"
							placeholderStyle="font-weight: normal;color:#BBBBBB;" v-model="fromList.intervieweeName"
							:disabled="true"></uv-input>
					</view>
				</view>
				<picker mode="selector" :range="certificateTypes" range-key="label" @change="handleCertificateChange"
					:disabled="true">
					<view class="user-input">
						<view class="form-title">所属部门</view>
						<view class="selected-value">
							<text :class="{ 
				          'default-text': !selectedItem,
				          'selected-text': selectedItem 
				        }">
								{{ selectedItem?.label || '所属部门' }}
							</text>

							<!-- <uv-icon name="arrow-right" color="#999" size="16" class="arrow-icon" /> -->
						</view>
					</view>
				</picker>
				<view class="form-item" @click="handleToReg" v-if="isNext == true">
					<view class="NextStep">下一步</view>
				</view>
				<view class="form-item-dls" v-else>
					<view class="NextStep">下一步</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue"
	import {
		$get,
		$post
	} from "@/utils/request.js"
	import {
		onShareAppMessage,
		onShow,
	} from '@dcloudio/uni-app';
	import {
		convertDepartments
	} from '@/utils/verifyMethod.js'


	const totalNum = ref(0)
	const props = defineProps({
		aboutTotal: {
			type: Number,
			required: true,
			default: 0
		}
	})
	watch(
		() => props.aboutTotal,
		(newTotalVal) => {
			totalNum.value = newTotalVal
		}, {
			immediate: true
		}
	)


	onShow(() => {
		const needClose = uni.getStorageSync('needCloseFlag');
		// 如果标记存在且为true，执行关闭方法
		if (needClose) {
			handleClose({
				show: false
			});
			visitPopup.value.close()
			uni.removeStorageSync('needCloseFlag');
		}


	});

	//输入框
	const inputCustomStyle = ref({
		padding: '12px 0',
		borderRadius: '6px',
		borderBottom: '1px solid #ddd',
		fontSize: '16px',
		fontWeight: '600',
		color: '#333',
	})


	const inputStyleDis = ref({
		padding: '12px 0',
		borderRadius: '6px',
		borderBottom: '1px solid #ddd',
		backgroundColor: " #fff",
		fontSize: '16px',
		fontWeight: '600',
		color: '#333',
	})


	// 拜访登记弹窗
	const visitPopup = ref(null)
	const handleOpen = () => {
		visitPopup.value.open()
		departmentList()
	}

	//关闭弹出层
	const handleClose = (e) => {
		if (e.show === false) {
			fromList.value.intervieweeName = '';
			fromList.value.intervieweeJobNumber = '';
			fromList.value.invitationCode = '';
			fromList.value.intervieweeDepart = '';
			selectedItem.value = ''
			isNext.value = false
		}

	}

	// 预约记录 actIndex 代表标签栏激活下表
	const hanldeToRecord = (id) => {
		if (id !== null && id !== undefined && id !== '') {
			uni.setStorageSync('actIndex', id);
		}
		uni.switchTab({
			url: `/pages/record/record`
		})
	}
	// 我的邀请码
	const handleToCode = () => {
		$get('/system/visitorInfo/getInfo').then(res => {
			if (res.data == null) {
				uni.showToast({
					icon: "none",
					title: "暂无预约~"
				})
			} else {
				uni.navigateTo({
					url: `/pages/invitation/invitation?id=${res.data.id}`
				})
			}
		})
	}

	// 失却焦点查询姓名
	const isNext = ref('false')
	const handleJobNumber = () => {
		$get(`/system/staff/getJobNumber?jobNumber=${fromList.value.invitationCode}`).then(res => {
			if (res.code == 200) {
				fromList.value.intervieweeName = res.data.nickName
				fromList.value.intervieweeJobNumber = res.data.jobNumber
				fromList.value.intervieweeDepart = res.data.deptId;
				selectedItem.value = {
					id: res.data.deptId,
					label: res.data.deptName
				}
				isNext.value = true
			} else {
				
				fromList.value.intervieweeName = '';
				fromList.value.intervieweeJobNumber = '';
				fromList.value.intervieweeDepart = '';
				selectedItem.value = ''
				
				isNext.value = false
				uni.showToast({
					icon: "error",
					title: res.msg
				})
			}
		})
	}


	// 部门列表查询
	const certificateTypes = ref([]);
	const selectedItem = ref(null);
	const departmentList = () => {
		$get('/system/dept/list').then(res => {
			const news = convertDepartments(res.data)
			certificateTypes.value = news
		})
	}
	const handleCertificateChange = (e) => {
		const selectedIndex = e.detail.value;
		selectedItem.value = certificateTypes.value[selectedIndex];
		fromList.value.intervieweeDepart = selectedItem.value.id;
	}

	// 下一步提交
	const fromList = ref({
		intervieweeName: '',
		intervieweeJobNumber: '',
		invitationCode: '',
		intervieweeDepart: ''
	});
	const handleToReg = () => {
		const {
			intervieweeName,
			intervieweeJobNumber,
			invitationCode,
			intervieweeDepart
		} = fromList.value;

		if (!invitationCode) {
			uni.showToast({
				icon: 'none',
				title: "请输入邀请码"
			});
			return;
		}
		const paramsStr = JSON.stringify(fromList.value)
		uni.navigateTo({
			url: `/pages/register/register?paramsStr=${encodeURIComponent(paramsStr)}`
		});

		// $get('/system/visitorInfo/visitorVerify', fromList.value).then(res => {
		// 	const paramsStr = JSON.stringify(fromList.value)
		// 	if (res.code == 200) {

		// 	} else {
		// 		uni.showToast({
		// 			icon: "error",
		// 			title: res.msg
		// 		})
		// 	}
		// })

		// if (!intervieweeName) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: "请输入被访人姓名"
		// 	});
		// 	return;
		// }


		// if (!intervieweeDepart) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: "请选择所属部门"
		// 	});
		// 	return;
		// }


		// $get('/system/visitorInfo/visitorVerify', fromList.value).then(res => {
		// 	const paramsStr = JSON.stringify(fromList.value)
		// 	if (res.code == 200) {
		// 		uni.navigateTo({
		// 			url: `/pages/register/register?paramsStr=${encodeURIComponent(paramsStr)}`
		// 		});
		// 	} else {
		// 		uni.showToast({
		// 			icon: "error",
		// 			title: res.msg
		// 		})
		// 	}
		// })
	};
</script>

<style lang="scss">
	.head-info {
		width: 100%;
		height: 190px;
		display: flex;
		justify-content: space-between;

		.info-left {
			width: 50%;
			height: 100%;
			background-image: url('../../../../static/img/bg-1.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			border-radius: 15px;


			.pen-box {
				width: 100%;
				height: 100px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 6px;
				margin: 20px 0px;

				.invitation-img {
					position: relative;

					.number-invitation {
						position: absolute;
						right: -40%;
						top: -10%;
						width: 18px;
						height: 18px;
						text-align: center;
						line-height: 18px;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: var(--font-12);
					}
				}



				.pen-img {
					width: 40px;
					height: 40px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pen-text {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
				}
			}

			.tips {
				width: 100%;
				color: var(--color-999);
				font-size: var(--font-12);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0px 26px;
				box-sizing: border-box;
			}

		}

		.info-right {
			width: 47%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.appointment,
			.qrCode {
				width: 100%;
				height: 46%;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.app-textBox {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.app-img {
					width: 84rpx;
					height: 84rpx;
					// margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.Msg-box {
					position: relative;

					.numberMsg {
						position: absolute;
						right: 6rpx;
						top: -10rpx;
						width: 30rpx;
						height: 30rpx;
						text-align: center;
						line-height: 30rpx;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: var(--font-12);
					}
				}

				.app-title {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
					margin: 0;
				}

				.app-text {
					margin-top: 4px;
					color: var(--color-999);
					font-size: var(--font-12);
					margin-bottom: 0;
				}

			}
		}


	}

	// 用户弹窗

	.visit-popup {
		width: 90vw;
		padding: 30px;
		box-sizing: border-box;

		.user-input {
			width: 100%;
			// height: 30px;
			padding: 16px 0px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 10px;
			// align-items: center;
			// justify-content: space-between;
			border-bottom: 1px solid #d5d5d5;
			color: var(--color-333);

			.form-title {
				color: var(--color-666);
				font-size: var(--font-16);
			}



			.selected-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 6px;

				.default-text {
					color: #BBBBBB;
				}

				.selected-text {
					font-size: var(--font-16);
					font-weight: 600;
					color: var(--color-333);
				}
			}

		}

		.form-item {
			margin-top: 20px;

			.form-title {
				color: var(--color-666);
				font-size: var(--font-16);
			}

			.NextStep {
				width: 100%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: var(--color-ff);
				font-size: var(--font-16);
				background-color: #2b74e2;
				border-radius: 50px;
				font-weight: 600;
			}
		}

		.form-item-dls {
			margin-top: 20px;

			.form-title {
				color: var(--color-666);
				font-size: var(--font-16);
			}

			.NextStep {
				width: 100%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-size: var(--font-16);
				border-radius: 50px;
				font-weight: 600;
				background-color: #c9cdd4;
				color: #ffffff;
				opacity: 0.8;
			}
		}

	}
</style>